<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="vieport" content="width=device-width,initial-scale=1.0">
    <title>详情首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
    <link rel="stylesheet" href="../static/css/me.css">
    <link rel="stylesheet" href="../static/css/typo.css">
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/lib/prism/prism.css">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
</head>
<body>
<!--页面头部导航-->
<nav th:replace="fragments ::menu(1)" class="ui inverted attached segment  m-padded-tb-mini m-shadow-small">
    <div class="ui container">
    <div class="ui inverted secondary stackable  menu">
       <h2 class="ui teal header item">Blog</h2>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini home icon"></i> 首页</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i> 分类</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i> 标签</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i> 归档</a>
        <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i> 关于我</a>
        <div class="right m-item item m-mobile-hide">
            <div class="ui icon transparent inverted input">
                <input type="text" placeholder="Search......">
                <i class="search link icon"></i>
            </div>
        </div>
     </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--中间内容-->
<div  id="waypoint" class="m-container-small m-padded-tb-big animated fadeIn">
    <div class="ui container">
<!--        头部-->
        <div class="ui top attached segment">
            <div class="ui horizontal   link list">
                <div class="item">
                    <img src="https://unsplash.it/100/100?image=1005" th:src="@{${blog.user.avatar}}" class="ui avatar image">
                    <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">罗津</a></div>
                </div>
                <div class="item">
                    <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2017-10-01</span>
                </div>
                <div class="item">
                    <i class="eye icon"></i> <span th:text="${blog.views}">2342</span>
                </div>
            </div>
        </div>
<!--        图片区域-->
        <div class="ui  attached segment">
            <img src="https://unsplash.it/800/450?image=1005"  th:src="@{${blog.firstPicture}}" alt="" class="ui fluid rounded image">
        </div>
<!--        内容区域-->
        <div class="ui   attached padded segment">
            <div class="ui right aligned basic segment">
              <div class="ui orange basic label" th:text="${blog.flag}">原创</div>
           </div>
            <h2 class="ui center aligned header" th:text="${blog.title}">关于刻意学习的清单</h2>
            <br>
            <div id="content" class="typo typo-selection m-padded-lr-responsive m-padded-tb-large" th:utext="${blog.content}">

            </div>
<!--            标签-->
            <div class="m-padded-lr-responsive">
                <div class="ui basic teal left pointing label" th:each="tag : ${blog.tags}" th:text="${tag.name}">方法论</div>
            </div>
<!--            赞赏-->
            <div th:if="${blog.appreciation}">
                 <div class="ui center aligned basic segment">
                    <button id="payButton" class="ui orange basic circular button">赞赏</button>
                </div>
                <div class="ui payQR  flowing popup  transition hidden">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size: inherit !important;">
                            <div class="image">
                                <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
                                <div>支付宝</div>
                            </div>
                            <div class="image">
                                <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui rounded bordered image" style="width: 120px">
                            <div>微信</div>
                            </div>
                        </div>
                    </div>
                 </div>
            </div>
        </div>
<!--        博客信息-->
        <div class="ui message attached positive " th:if="${blog.shareStatement}">
            <div class="ui middle aligned grid">
                <div class="eleven wide column">
                   <ui class="list">
                       <li><span th:text="${blog.user.nickname}">111</span><a href="#" th:href="@{/about}" target="_blank">(联系作者)</a></li>
                       <li> <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2017-10-01</span></li>
                       <li>1111111111</li>
                       <li>1111111111</li>
                       <li>1111111111</li>
                   </ui>
                    
                </div>
                <div class="five wide column">
                    <img src="../static/images/wechat.jpg"  th:src="@{/images/wechat.jpg}" alt="" class="ui right floated  rounded bordered image" style="width: 110px">
                </div>
            </div>

        </div>
<!--        留言区域-->
        <div  id="comment-container" th:if="${blog.commentabled}"  class="ui bottom attached segment">

            <div class="ui teal segment">

                <div class="ui threaded comments">
                    <h3 class="ui dividing header">Comments</h3>
                    <div class="comment">
                        <a class="avatar">
                            <img src="https://unsplash.it/100/100?image=1005">
                        </a>
                        <div class="content">
                            <a class="author">Matt</a>
                            <div class="metadata">
                                <span class="date">Today at 5:42PM</span>
                            </div>
                            <div class="text">
                                How artistic!
                            </div>
                            <div class="actions">
                                <a class="reply">回复</a>
                            </div>
                        </div>
                    </div>
                    <div class="comment">
                        <a class="avatar">
                            <img src="https://unsplash.it/100/100?image=1005">
                        </a>
                        <div class="content">
                            <a class="author">Elliot Fu</a>
                            <div class="metadata">
                                <span class="date">Yesterday at 12:30AM</span>
                            </div>
                            <div class="text">
                                <p>This has been very useful for my research. Thanks as well!</p>
                            </div>
                            <div class="actions">
                                <a class="reply">回复</a>
                            </div>
                        </div>
                        <div class="comments">
                            <div class="comment">
                                <a class="avatar">
                                    <img src="https://unsplash.it/100/100?image=1005">
                                </a>
                                <div class="content">
                                    <a class="author">Jenny Hess</a>
                                    <div class="metadata">
                                        <span class="date">Just now</span>
                                    </div>
                                    <div class="text">
                                        Elliot you are always so right :)
                                    </div>
                                    <div class="actions">
                                        <a class="reply">回复</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="comment">
                        <a class="avatar">
                            <img src="https://unsplash.it/100/100?image=1005">
                        </a>
                        <div class="content">
                            <a class="author">Joe Henderson</a>
                            <div class="metadata">
                                <span class="date">5 days ago</span>
                            </div>
                            <div class="text">
                                Dude, this is awesome. Thanks so much
                            </div>
                            <div class="actions">
                                <a class="reply">回复</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="ui form">

                <input type="text" name="blog.id" th:value="${blog.id}">
                <input type="text" name="parentComment.id" th:value="-1">

                <div class="field">
                    <textarea name="content" placeholder="请输入评论信息..."></textarea>
                </div>
                <div class="fields">

                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon  input" >
                            <i class="user icon"></i>
                            <input type="text" name="nickname" placeholder="姓名">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input type="text" name="email" placeholder="邮箱">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!--侧边小工具栏-->
<div id="toolbar"  class="m-padded m-fixed m-right-bottom" style="display: none">
    <div class="ui vertical icon buttons ">
        <button type="button" class="ui toc teal button">目录</button>
        <a href="#comment-container" class="ui teal button">留言</a>
        <button class="ui wechat icon button"><i class="weixin icon"></i></button>
        <a href="#" class="ui icon button"><i class="chevron up icon"></i></a>
    </div>
</div>

<div class="ui toc-container flowing popup  transition hidden" style="width: 250px !important;">

    <ol class="js-toc">

    </ol>
</div>

<div id="qrcode"   class="ui wechat-qr flowing popup transition hidden " style="width: 130px !important;">
<!--    <img src="../static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 120px">-->
</div>


<br>
<br>
<!--页面页脚-->
<footer th:replace="fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
<div class="ui center aligned container">
    <div class="ui  inverted divided stackable grid">
        <div class="three wide column">
            <div class="ui inverted link list">
                <img src="../static/images/wechat.jpg" class="ui rounded image" style="width: 110px" >
            </div>
        </div>
        <div class="three wide column">
            <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
            <div class="ui inverted link list">
                <a href="#" class="item">用户故事</a>
                <a href="#" class="item">用户故事</a>
                <a href="#" class="item">用户故事</a>
            </div>
        </div>
        <div class="three wide column">
            <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
            <div class="ui inverted link list">
                <a href="#" class="item">18028683164@163.com</a>
                <a href="#" class="item">QQ:1353186814</a>
            </div>
        </div>
        <div class="seven wide column">
            <h4 class="ui inverted header m-text-thin m-text-spaced ">jin</h4>
            <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客，会分享关于编程，写作，思考相关的任何内容，希望可以给来到这儿的人有所帮助····</p>
        </div>
    </div>
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @2016-2017 Luojin Designed by Luojin</p>
</div>
</footer>












<!--一个JQ的一个UI框架的 都是通过CDN导入 比较慢 放本地比较快-->
<!--<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>-->
<!--/*/<th:block th:replace="fragments :: script">/*/-->
<script src="../static/js/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js"></script>
<script src="../static/lib/prism/prism.js"></script>
<script src="../static/lib/tocbot/tocbot.min.js"></script>
<script src="../static/lib/qrcode/qrcode.min.js"></script>
<!--/*/</th:block>/*/-->
<script th:inline="javascript">
$('.menu.toggle').click(function () {

    $('.m-item').toggleClass('m-mobile-hide')

});

 $('#payButton').popup({
     popup : $('.payQR.popup'),
     on : 'click',
     position : 'bottom center'
 });
$('.toc.button').popup({
    popup : $('.toc-container.popup'),
    on : 'click',
    position : 'left center'
});

tocbot.init({
   tocSelector:'.js-toc',
    contentSelector:'.js-toc-content',
    headingSelector:'h1,h2,h3',
});

$('.wechat').popup({
    popup: $('.wechat-qr'),
    position: 'left center'
});

var serurl = /*[[#{blog.serurl}]]*/"127.0.0.1:8080";
var url = /*[[@{/blog/{id}(id=${blog.id})}]]*/"";
var qrcode = new QRCode("qrcode", {
    text: serurl+url,
    width: 110,
    height: 110,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

var waypoint = new Waypoint({
    element: document.getElementById('waypoint'),
    handler: function(direction) {
        if (direction == 'down') {
            $('#toolbar').show(100);
        } else {
            $('#toolbar').hide(500);
        }
        console.log('Scrolled to waypoint!  ' + direction);
    }
});

//评论表单验证
$('.ui.form').form({
    fields: {
        title: {
            identifier: 'content',
            rules: [{
                type: 'empty',
                prompt: '请输入评论内容'
            }
            ]
        },
        content: {
            identifier: 'nickname',
            rules: [{
                type: 'empty',
                prompt: '请输入你的大名'
            }]
        },
        type: {
            identifier: 'email',
            rules: [{
                type: 'email',
                prompt: '请填写正确的邮箱地址'
            }]
        }
    }
});

</script>
</body>
</html>